Brainy Check

分帳應用程式

關於作品

題目 - 分帳管理工具 / App

此次作品是參加「產品設計實戰:用 Figma 打造絕佳 UI/UX」線上課程所舉辦的設計挑戰活動「第一屆介面設計挑賽」。

透過題目完成及時計算帳目的管理工具。

執行時間:

1 Week

扮演角色:

UX: 問題定義、訂定功能、功能流程
UI: Wireframe、精稿、Prototype

題目解析

預定目標:

幫助使用者紀錄團體共同花費與金錢流向,不再因為擾人的分帳計算感到頭痛。

5W1H-問題統整:

Who

有固定記帳的小資族,常聚餐的學生族。(對於金錢需要精打細算,想要清楚知道活動聚會的金錢流向與金錢分攤的使用者。)

What

和同事、好友有共同聚會 / 出遊時,能清楚記錄分帳的內容。

Why

使用者能即時紀錄帳單內容,並立即通知其他使用者,避免遺忘正確收款與付款的金額。

When

聚餐結帳時,發現身上錢不夠分攤只好請朋友先付。
出遊時會有朋友先付帳來節省時間,可先記錄費用結束後一起結算。

Where

使用者在靜態的狀況下使用!
出遊前,在家裡事先訂票時;出遊時,在車上紀錄剛剛小吃的金額。
聚餐時,在餐廳馬上算出分攤金額時。
在飯店房間,查看今天發票,輸入金額計算分攤的錢。

How

通常使用者會直接開啟手機計算機或是用紙筆直接計算,當不是平均分攤時,總是讓人算到頭昏腦脹; 事後到底要付朋友多少錢早就忘光了,而發票也不曉得消逝到哪去。所以希望建立一個能自動計算分配金額,無論自訂或是分攤,讓您知道要付款給哪位成員、也能立刻拍下收據或發票不怕遺失!

競品分析

由於時間僅有一周,避免在規劃時卡關過久,直接針對官方提供的User Story 做其他競品分析的需求,也參考競品的操作流程。

分析競品的優缺點 analysis-b

確定功能

使用者故事: (題目: 從5條 use story(綠) 中至少挑選 2 條規劃功能)

延伸提供的使用者故事,以使用者角度思考延伸功能,使用者操作產品時,還會遭遇什麼難題,加入產品中給予使用者體貼的感受。
捨棄第5條規劃總預算的功能,盡可能加強分帳功能的流暢度。

詳細延伸官方提供的使用者故事 userstory-b

資訊架構

依照延伸的使用者故事,整理出類型相似的活動,進行分類整合功能頁面。

流程圖-Flow Chart

規劃操作流程,思考可能使用的元件和頁面

點擊圖片即可放大

Wireframe

線框稿 wireframe-b

特色介紹

1.帳目總覽

清晰的帳目介面,周 / 月 / 年 的分帳紀錄與帳目種類知道自己花費,是否還有欠款或未收費用。

帳目總覽精稿 intro1-b

2.活動分類

考慮到使用族群的活動經常是一系列的行程,所以使用活動作為大分類,加入當天行程的帳單。 付款方式可以依據「活動付款」,或是「單筆帳單付款」顯示通知。

活動分類精稿 intro2-b

3.好友管理

可以直接輸入好友名稱加入,也能進一步 Gmail 認證,依據需求,決定是否使用認證好友。可以直接輸入好友名稱加入,也能進一步 Gmail 認證,依據需求,決定是否使用認證好友。

好友管理精稿 intro3-b

4.快速新增

快速新增活動 / 帳單,採用步驟式輸入,避免單頁填入資料過多、表單過長,讓使用者失去耐心。

快速新增精稿 intro4-b

5.多人編輯

使用共同編輯需要好友信箱認證,從好友名單選取共同編輯者,當好友開啟 App 時就能直接編輯的帳單。

多人編輯精稿 intro5-b

6.即時通知

不論接收款項、有新帳單或是其他編輯者變更資料都能收到訊息通知。讓使用者立即知道帳單的任何消息!

即時通知精稿 intro6-b

Prototype

學到什麼

花費一週完成一個 app 作品讓自己感到驚訝之外,作品入圍也給了自己一些鼓勵。比賽後後重新審視此次製作過程,在規劃流程階段關容易被其他問題給拉走,許多的問題會不斷從腦袋迸出,像是可能發生收款人超收金額的問題發生, 或是收款人如何確認金額入帳等問題。

因考慮到時間問題,決定重新確認一次User Story,先梳理清楚最需要的 MVP 功能,迸出的新問題能作為產品的後續更新功能,告訴自己優先解決需求就好,這也是此次練習發現自己容易再流程規劃卡關的原因。

back to top